<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/login.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/qs.min.js"></script>
	<script type="text/javascript" src="js/request.js"></script>

</head>
<body>

<div id="app">
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京东！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="京东商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10 regist">
		<div class="login_hd">
			<h2>用户注册</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<div class="login_form fl">
				<form action="" method="post">
					<ul>
						<li>
							<label for="">用户名：</label>
							<input type="text" class="txt" name="username" v-model="username" @blur="usernameDuplicateCheck()"/>
							<span style="color:red">{{username_msg}}</span>
							<p>3-20位字符，可由中文、字母、数字和下划线组成</p>
						</li>
						<li>
							<label for="">密码：</label>
							<input type="password" class="txt" name="password" v-model="password"/>
							<span style="color:red">{{password_msg}}</span>
							<p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
						</li>
						<li>
							<label for="">确认密码：</label>
							<input type="password" class="txt" name="password" v-model="repeatPassword"/>
							<span style="color:red">{{repeat_password_msg}}</span>
							<p> <span>请再次输入密码</p>
						</li>
						<li class="checkcode">
							<label for="">验证码：</label>
							<input type="text"  name="checkcode" v-model="code"/>
							<img id="codeImage" style="height: 32px;" src="http://api.shopping.com/auth/codeImage?width=150&height=32&i=0" alt="" />
							<span>看不清？<a style="cursor: pointer" @click="changeCode()">换一张</a></span>
							<span style="color:red">{{code_msg}}</span>
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
						</li>
						<li>
							<label for="">&nbsp;</label>
							<!--<input type="button" value="" class="login_btn" @click="register()"/>-->
							<input v-if="registering" type="button" value="正在注册......" style="width: 307px; height: 34px;" disabled/>
							<input v-else type="button" value="注  册" style="width: 307px; height: 34px;" @click="register()"/>
						</li>
					</ul>
				</form>

				
			</div>
			
			<div class="mobile fl">
				<h3>手机快速注册</h3>			
				<p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
				<p><strong>1069099988</strong></p>
			</div>

		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京东论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>

<script type="text/javascript">
	let vm = new Vue({
		el: "#app",
		data: function () {
			return {
				username: "",
				password: "",
				repeatPassword: "",
				code: "",
				registering: false,

				username_msg: "",
				password_msg: "",
				repeat_password_msg: "",
				code_msg: ""
			}
		},
		methods: {
			checkParam() {
				if(!this.username || this.username.length < 3 || this.username.length > 20) {
					this.username_msg = "用户名要求3-20位";
					return false;
				}
				if(!this.password || this.password.length < 6 || this.password.length > 20) {
					this.password_msg = "密码要求6-20位";
					return false;
				}
				if(this.password !== this.repeatPassword) {
					this.repeat_password_msg = "密码不一致";
					return false;
				}
				if(!this.code || this.code.length !== 4) {
					this.code_msg = "验证码要求4位";
					return false;
				}
				return true;
			},
			register() {
				if (this.checkParam()) {
					let checked = $(".chb").attr("checked");
					if (checked !== "checked") {
						alert("请阅读并同意《用户注册协议》")
						return;
					}
					this.registering = true;
					request("http://api.shopping.com/auth/register", "post", {
						username: this.username,
						password: this.password,
						code: this.code
					}).then(resp => {
						this.registering = false;
						location.href = "login.html";
					}).catch(codeMsg => {
						this.registering = false;
						if(codeMsg.code === USERNAME_EXIST) {
							this.username_msg = codeMsg.msg;
						} else if(codeMsg.code === VERIFY_CODE_INVALID || codeMsg.code === VERIFY_CODE_WRONG) {
							this.code_msg = codeMsg.msg;
						}
						this.changeCode();
					})
				}
			},
			changeCode() {
				let img = document.getElementById('codeImage');
				img.src = "http://api.shopping.com/auth/codeImage?width=150&height=32&i=" + Math.floor(Math.random() * 100);
			},
			usernameDuplicateCheck() {
				if (this.username) {
					request("http://api.shopping.com/user/user/exist?username=" + this.username, "get").then(data => {
						if (data) this.username_msg = "用户名已存在";
					})
				}
			}
		},
		created() {

		},
		watch: {
			username() {
				this.username_msg = "";
			},
			password() {
				this.password_msg = "";
			},
			repeatPassword() {
				this.repeat_password_msg = "";
			},
			code() {
				this.code_msg = "";
			}
		}
	})
</script>

</body>
</html>